<template>
    <AdminMain>
        <el-form :model="holidays" ref="form" :rules="rules" label-width="80px" inline>
            <el-form-item label="类型">
                <el-select v-model="holidays.type">
                    <el-option label="假期" value="holidays" />
                    <el-option label="调休上班" value="works" />
                </el-select>
            </el-form-item>
            <el-form-item label="日期">
                <el-date-picker v-model="holidays.date" type="date" placeholder="选择日期时间" value-format="YYYYMMDD" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交保存</el-button>
            </el-form-item>
        </el-form>
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>假期列表</span>
                </div>
            </template>
            <div class="holidays">
                <span v-for="holiday of holidayList?.holidays">{{ holiday }}</span>
            </div>
        </el-card>
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>调休上班列表</span>
                </div>
            </template>
            <div class="holidays">
                <span v-for="work of holidayList?.works">{{ work }}</span>
            </div>
        </el-card>
    </AdminMain>
</template>

<script setup lang="ts">
import AdminMain from '@/layout/adminMain.vue'
import { FormInstance } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
import { updateHoliday } from '@/apis/auth'
import { getHolidays } from '@/apis/base'

const form = ref<FormInstance>()
const holidays = ref<HolidayModel>({ type: 'holidays', date: "" })
const rules = reactive({})
const holidayList = ref<HolidayResponse>()

function onSubmit() {
    form.value?.validate(async valid => {
        if (valid) {
            console.log(holidays.value)
            const r = await updateHoliday(holidays.value)
            console.log(r)
        }
    })
}
async function getHoliday() {
    const res = await getHolidays()
    holidayList.value = res.data
}

onMounted(() => {
    getHoliday()
})
</script>

<style lang="scss" scoped>
.holidays {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
</style>